<template>
	<view class="data-statistics">
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<!-- 顶部部门选择 -->
		<view class="dep-btn" @click="showDepSelect = true">
			<text>{{depName}}</text>
			<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
		</view>
		<!-- 数据统计区域 -->
		<view class="data-count">
			<view class="top-tab">
				<view class="item" :class="current === index ? 'active' : ''" @click="handleActive(item.name, index)"
					v-for="(item, index) in tabList" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-item">
					<view class="num">
						{{topData.zong_num}}
					</view>
					<view class="title">
						总诉求数
					</view>
				</view>
				<view class="bottom-item">
					<view class="num">
						{{topData.daiban_num}}
					</view>
					<view class="title">
						未办事项
					</view>
				</view>
				<view class="bottom-item">
					<view class="num">
						{{topData.yiban_num}}
					</view>
					<view class="title">
						完结数
					</view>
				</view>
				<view class="bottom-item">
					<view class="num">
						{{topData.yiban_num}}
					</view>
					<view class="title">
						平均用时
					</view>
				</view>
			</view>
		</view>
		<!-- 我的任务模块 -->
		<view class="task-wrap">
			<title-tools title="任务完成情况" fontSize="30rpx">
				<view class="month" @click="handleShowMonthSelect('task')">
					<text>{{month}}月 </text>
					<u-icon name="arrow-down-fill" color="#fff" size="28"></u-icon>
				</view>
			</title-tools>
			<view class="content-wrap">
				<!-- 环形图表 -->
				<view class="charts-box">
					<qiun-data-charts type="pie"
						:canvas2d="true"
						canvasId="wancheng"
						:opts="{color:['#0754D9','#0584ED','#00B3FF'],dataLabel:false,legend:{position:'right'}}"
						:chartData="pieChartData1"></qiun-data-charts>
				</view>
			</view>
		</view>
		<!-- 趋势图区域 -->
		<view class="tendency-wrap">
			<title-tools title="反馈趋势" fontSize="30rpx"></title-tools>
			<view class="charts-box">
				<qiun-data-charts type="column"
					:canvas2d="true"
					canvasId="qushi"
					:opts="{color:['#82A9EC','#0754D9'],legend:{show: false},extra:{column:{linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:true,customColor:['#0754D9']}}}"
					:chartData="chartsDataColumn" />
			</view>
		</view>
		<!-- 热门问题区域 -->
		<view class="hot-question">
			<view>
				<title-tools title="热门问题TOP8" fontSize="30rpx">
					<view class="month" style="position: relative; z-index: 9999;" @click="handleShowMonthSelect('question')">
						<text>{{myMonth}}月 </text>
						<u-icon name="arrow-down-fill" color="#fff" size="28"></u-icon>
					</view>
				</title-tools>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="pie" :canvas2d="true" canvasId="remen" :opts="{dataLabel:false,legend:{position:'right'}}"
					:chartData="pieChartData" />
			</view>
		</view>
		<u-select v-model="showMonthSelect" :list="monthList" @confirm="confirm"></u-select>
		<u-select v-model="showMonthSelect1" :list="monthList" @confirm="confirm1"></u-select>
		<!-- 部门选择器 -->
		<u-select v-model="showDepSelect" value-name="id" label-name="name" :list="depList" @confirm="depConfirm"></u-select>
	</view>
</template>

<script>
	import TitleTools from '@/components/title-tools/TitleTools.vue'
	import { apiGetclassifys } from '@/api/department/department.js'
	import {
		apiGetInformationsTop,
		apiGetInformationsMonthLeader,
		apiGetInformationsMonth,
		apiGetTop8
	} from '@/api/data/data.js'
	export default {
		name: 'DataStatisticsFour',
		components: {
			TitleTools
		},
		data() {
			return {
				pieChartData1: {
					"series": [{
						"data": [
						]
					}]
				},
				tabList: [{
						name: '今日',
					},
					{
						name: '本周'
					},
					{
						name: '本月'
					},
					{
						name: '今年'
					}
				],
				topData: {},
				data: [],
				//选中标签
				current: 0,
				month: '',
				myMonth: '',
				monthList: [{
						label: '1月',
						value: 1
					},
					{
						label: '2月',
						value: 2
					},
					{
						label: '3月',
						value: 3
					},
					{
						label: '4月',
						value: 4
					},
					{
						label: '5月',
						value: 5
					},
					{
						label: '6月',
						value: 6
					},
					{
						label: '7月',
						value: 7
					},
					{
						label: '8月',
						value: 8
					},
					{
						label: '9月',
						value: 9
					},
					{
						label: '10月',
						value: 10
					},
					{
						label: '11月',
						value: 11
					},
					{
						label: '12月',
						value: 12
					}
				],
				showMonthSelect: false,
				showMonthSelect1: false,
				showDepSelect: false,
				//打开的下拉框类型
				type: '',
				chartData: {
					"categories": [
						"10.28",
						"10.29",
						"10.30",
						"10.31",
						"11.1",
						"11.2"
					],
					"series": [{
						"name": "完成量",
						"data": [
							35,
							8,
							25,
							37,
							4,
							20
						]
					}]
				},
				pieChartData: {
					"series": [{
						"data": [
						]
					}]
				},
				chartsDataColumn: {},
				depList: [],
				depId: '',
				depName: '全部'
			}
		},
		created() {
			const date = new Date();
			this.month = date.getMonth() + 1;
			this.myMonth = date.getMonth() + 1;
			this.apiGetInformationsTop();
			this.apiGetInformationsMonth();
			this.apiGetInformationsMonthLeader();
			this.apiGetTop8();
			//获取部门列表
			this.apiGetclassifys();
			uni.$on('updateData5', () => {
				this.apiGetInformationsTop();
				this.apiGetInformationsMonth();
				this.apiGetInformationsMonthLeader();
				this.apiGetTop8();
			})
		},
		methods: {
			//tab标签项点击事件
			handleActive(name, index) {
				switch (name) {
					case '今日':
						this.topData = this.data.today;
						break;
					case '本周':
						this.topData = this.data.week;
						break;
					case '本月':
						this.topData = this.data.month;
						break;
					case '今年':
						this.topData = this.data.year;
						break;
					default:
						break;
				}
				this.current = index
			},
			//打开月份下拉选择框
			handleShowMonthSelect(type) {
				console.log(123)
				this.type = type;
				if (type == 'task') {
					this.showMonthSelect = true;
				} else {
					this.showMonthSelect1 = true;
				}
			},
			//下拉框回调
			confirm(e) {
				this.month = e[0].value;
				this.apiGetInformationsMonth();
			},
			confirm1(e) {
				this.myMonth = e[0].value;
				this.apiGetTop8();
			},
			async apiGetInformationsTop() {
				const res = await apiGetInformationsTop(this.depId);
				this.data = res.data;
				this.topData = this.data.today;
				console.log(res)
			},
			//获取部门列表
			async apiGetclassifys () {
				const res = await apiGetclassifys();
				this.depList = res.data;
				this.depList.unshift({
					name: '全部',
					id: ''
				})
			},
			//获取近六月反馈数据
			async apiGetInformationsDay() {
				const res = await apiGetInformationsDay();
				const obj = {
					categories: [
			
					],
					series: [{
						name: "完成量",
						data: [
			
						]
					}]
				}
				res.data.forEach(item => {
					obj.categories.push(item.yuefen);
					obj.series[0].data.push(item.fankui_num);
				})
				this.chartsDataColumn = obj;
			},
			//获取反馈趋势
			async apiGetInformationsMonthLeader() {
				const res = await apiGetInformationsMonthLeader();
				const obj = {
					categories: [
							
					],
					series: [{
						name: "处理量",
						data: [
							
						]
					}]
				}
				res.data.forEach(item => {
					obj.categories.push(item.yuefen + '月');
					obj.series[0].data.push(item.fankui_num);
				})
				this.chartsDataColumn = obj;
			},
			//获取月份饼图数据
			async apiGetInformationsMonth() {
				const res = await apiGetInformationsMonth(this.month, this.depId);
				this.pieChartData1.series[0].data = res.data;
			},
			//获取热门问题8数据
			async apiGetTop8 () {
				const res = await apiGetTop8(this.myMonth);
				this.pieChartData.series[0].data = res.data;
			},
			// 部门选择器确认回调
			depConfirm (e) {
				console.log(e)
				this.depId = e[0].value;
				this.depName = e[0].label;
				this.apiGetInformationsTop();
				this.apiGetInformationsMonth();
			}
		},
		beforeDestroy() {
			uni.$off('updateData5')
		}
	}
</script>

<style lang="scss" scoped>
	.data-statistics {
		padding: 20rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.data-count {
		padding: 20rpx 30rpx;
		width: 710rpx;
		height: 263rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.top-tab {
			display: flex;
			justify-content: space-around;
			padding-bottom: 27rpx;
			border-bottom: 1px solid #E5E5E5;

			.item {
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000000;
				border-radius: 20rpx;
				transition: .5s;

				&.active {
					background: #196EFF;
					color: #fff;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			height: 152rpx;

			.bottom-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.num {
					font-size: 60rpx;
					font-family: D-DIN;
					font-weight: bold;
					color: #000000;
				}

				.title {
					font-size: 26rpx;
					color: #000000;
				}
			}
		}
	}

	.task-wrap {
		margin-top: 20rpx;
		padding: 30rpx;
		padding-bottom: 61rpx;
		width: 710rpx;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.month {
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #196EFF;
			border-radius: 20rpx;

			text {
				margin-right: 10rpx;
			}
		}

		.content-wrap {
			display: flex;
			margin-top: 61rpx;

			.charts-box {
				// flex-shrink: 0;
				// width: 237rpx;
				// height: 247rpx;
				height: 440rpx;
				width: 650rpx;
				// text-align: center;

				// .u-progress-content {
				// 	text-align: center;

				// 	view {
				// 		font-size: 60rpx;
				// 		font-family: D-DIN;
				// 		font-weight: bold;
				// 		color: #000000;
				// 	}

				// 	.u-progress-info {
				// 		font-size: 26rpx;
				// 		color: #000000;
				// 	}
				// }
			}

			.right-data {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-left: 77rpx;
				width: 100%;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 50%;

					.num {
						font-size: 60rpx;
						font-family: D-DIN;
						font-weight: bold;
						color: #000000;
					}

					.title {
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
		}
	}

	// 趋势图区域样式
	.tendency-wrap {
		padding: 30rpx;
		margin-top: 20rpx;
		width: 710rpx;
		// height: 406rpx;
		background: #FFFFFF;
		opacity: 0.9;
		border-radius: 20rpx;

		.charts-box {
			height: 410rpx;
			width: 710rpx;
		}
	}

	.hot-question {
		padding: 30rpx;
		margin-top: 20rpx;
		width: 710rpx;
		height: 550rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.month {
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #196EFF;
			border-radius: 20rpx;

			text {
				margin-right: 10rpx;
			}
		}

		.charts-box {
			// height: 550rpx;
			// width: 610rpx;
			width: 630rpx;
			height: 520rpx;
		}
	}
	
	.dep-btn {
		margin-bottom: 20rpx;
		text-align: center;
		line-height: 80rpx;
		width: 710rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		
		text {
			margin-right: 10rpx;
		}
	}
</style>
